<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        i.layui-icon {
            font-size: 12px !important;
        }

        .layui-table-cell {
            height: unset;
            line-height: 24px;
        }

        li:not(:nth-child(1)) {
            border-top: 1px solid #eeeeee;
        }

        li:hover {
            background-color: #E2E2E2;
        }
    </style>
</head>

<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">系统管理</a>
            <a>
                <cite>材料列表</cite>
            </a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">
                    <form action="" class="layui-form livingList">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">材料类型</label>
                                <div class="layui-input-block">
                                    <select name="type" id="categoryId">
                                        <option value="">请选择材料类型</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">搜索</label>
                                <div class="layui-input-block">
                                    <input type="search" autocomplete="off" class="layui-input" id="searchInput">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn search" type="button" id='search'>
                                    <i class="iconfont layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="toolbar">
    <button class="layui-btn" type="button" lay-event="addMaterial" auth="addMaterial">添加</button>
</script>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "upload",], function () {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var categorySelect = '';

        $.ajax({
            url: url + "/setting/material/categoryLists",
            type: "POST",
            async: false,
            data: {
                token: getToken()
            },
            success: function (r) {
                if (r.code === 100000) {
                    for (var i = 0; i < r.data.length; i++) {
                        categorySelect += `<option value="${r.data[i].id}">${r.data[i].name}</option>`
                    }
                    $('#categoryId').append(categorySelect);
                    form.render();
                } else {
                    tips('材料分类', r.msg);
                }
            }
        });

        var lists = table.render({
            elem: 'table:first', //绑定DOM元素
            id: 'lists', //table的id
            title: '材料列表',
            height: 'full-120',
            contentType: "application/json; charset=utf-8",
            url: url + '/setting/material/lists', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data.data,
                    "msg": res.msg,
                    "count": res.data.count
                };
            },
            where: {
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter', {
                title: '导入',
                layEvent: 'upload',
                icon: 'layui-icon-upload-circle'
            }, {title: '导出', layEvent: 'excel', icon: 'layui-icon-export'}],
            page: true, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                [ //表头
                    {field: '', title: '编号', type: 'numbers', width: '6%'},
                    {
                        field: 'name', title: '材料名称', width: "16%", templet: function (d) {
                            return d.name
                        }
                    },
                    {
                        field: 'spec', title: '规格', width: "28%", templet: function (d) {
                            var html = '<ul>';
                            var color = '';
                            for (var i = 0; i < d.children.length; i++) {
                                color = d.children[i].status === 0 ? 'color:lightcoral;' : '';
                                html += `<li data-id="${d.children[i].id}" style="${color}height:24px;">${d.children[i].spec==null?'':d.children[i].spec}</li>`;
                            }
                            html += '</ul>';
                            return html;
                        }
                    },
                    {
                        field: 'unitName', title: '计数单位', width: "8%", templet: function (d) {
                            var html = '<ul>';
                            var color = '';
                            for (var i = 0; i < d.children.length; i++) {
                                color = d.children[i].status === 0 ? 'color:lightcoral;' : '';
                                html += `<li data-id="${d.children[i].id}" style="${color}height:24px;">${d.children[i].unitName==null?'':d.children[i].unitName}</li>`;
                            }
                            html += '</ul>';
                            return html;
                        }
                    },
                    {field: 'categoryName', title: '类型', width: "8%"},
                    {field: 'order', title: '排序', width: "6%"},
                    {
                        field: 'status', title: '状态', width: "6%", templet: function (d) {
                            return d.status === 1 ? '启用' : '停用';
                        }
                    },
                    {
                        field: '', title: '操作', width: "22%", templet(d) {
                            var html = `
                            <button class='layui-btn' lay-event='spec' auth="spec">规格</button>
                            <button class='layui-btn' lay-event='edit' auth="editMaterial">编辑</button>`
                            if (d.status === 1) {
                                html += `<button class='layui-btn' lay-event='status' auth="materialStatus">停用</button>`
                            } else {
                                html += `<button class='layui-btn' lay-event='status' auth="materialStatus">启用</button>`
                            }
                            if (d.children.length === 0) {
                                html += `<button class='layui-btn layui-btn-danger' lay-event='deleteMaterial' auth="deleteMaterial">删除</button>`
                            }
                            return html
                        }
                    }
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done: function () {
                permission();
            }
        });

        table.on('tool(test)', function (data) {
            if (data.event === 'spec') {
                window.location.href = 'materialSpec.html?id=' + data.data.id + '&categoryId=' + data.data.categoryId;
            } else if (data.event === 'edit') {
                layer.open({
                    type: 1,
                    title: "编辑材料",
                    area: ['50%', '60%'],
                    content: `
                        <form class="layui-form layerOpen" action="">
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">材料名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" value='${data.data.name}' class="layui-input" id="name" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">材料类型</label>
                                    <div class="layui-input-block">
                                        <select name="categoryId" id="categoryId" lay-filter="category">
<!--                                            <option value="">请选择材料类型</option>-->
                                            ${categorySelect}
                                       </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">排序</label>
                                    <div class="layui-input-block">
                                        <input type="number" value='${data.data.order}' class="layui-input" id="order" autocomplete="off" min="0">
                                    </div>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success: function () {
                        $(`select[name=categoryId] option[value=${data.data.categoryId}]`).attr('selected','selected');
                        form.render();
                    },
                    yes: function (index, layero) {
                        var name = $('#name').val();
                        var order = $('#order').val();
                        if (name == '') {
                            tips('编辑材料', {msg: "请填写材料名称"});
                            return
                        }
                        $.ajax({
                            url: url + '/setting/material/editMaterial',
                            type: "post",
                            data: {
                                id: Number(data.data.id),
                                name: name,
                                order: Number(order),
                                token: getToken()
                            },
                            dataType: "json",
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('编辑材料', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('编辑材料', r);
                                }
                            }
                        })
                    }
                })
            } else if (data.event === 'status') {
                layer.open({
                    type: 0,
                    title: "启用/停用",
                    area: ['40%', '30%'],
                    content: `是否${data.data.status === 1 ? '停用' : '启用'} ${data.data.name}`,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + '/setting/material/editStatus',
                            type: "post",
                            data: {
                                id: Number(data.data.id),
                                status: data.data.status === 1 ? 0 : 1,
                                token: getToken()
                            },
                            dataType: "json",
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('启用/停用', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('启用/停用', r);
                                }
                            }
                        })
                    }
                })
            } else if (data.event === 'deleteMaterial') {
                layer.open({
                    type: 0,
                    title: "删除材料",
                    area: ['40%', '30%'],
                    content: `是否删除 ${data.data.name}`,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + '/setting/material/deleteMaterial',
                            type: "post",
                            data: {
                                id: Number(data.data.id),
                                token: getToken()
                            },
                            dataType: "json",
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('删除材料', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('删除材料', r);
                                }
                            }
                        })
                    }
                })
            }
        });

        table.on('toolbar(test)', function (data) {
            if (data.event === 'addMaterial') {
                layer.open({
                    type: 1,
                    title: "添加材料",
                    area: ['50%', '60%'],
                    content: `
                    <form class="layui-form layerOpen" action="" lay-filter="add">
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">材料名称</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="name" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">材料类型</label>
                                <div class="layui-input-block">
                                    <select name="categoryId" id="categoryId" lay-filter="category">
                                        <option value="">请选择材料类型</option>
                                        ${categorySelect}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-item" style="display: none">
                            <div class="layui-inline">
                                <label class="layui-form-label">编码字母</label>
                                <div class="layui-input-block">
                                    <input type="text" value='' class="layui-input" id="code" autocomplete="off" maxlength="2">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-block">
                                    <input type="number" value='1' class="layui-input" id="order" autocomplete="off" min="0">
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success: function () {
                        form.render();
                    },
                    yes: function (index, layero) {
                        var name = $('#name').val();
                        var order = $('#order').val();
                        var categoryId = form.val("add").categoryId;
                        var code = $('#code').val();
                        if (name == '') {
                            tips('添加材料', {msg: "请填写材料名称"});
                            return
                        }
                        if (categoryId == '') {
                            tips('添加材料', {msg: "请选择材料类型"});
                            return
                        }
                        if (categoryId == '3' || categoryId == '4') {
                            if (code === '') {
                                tips('添加材料', {msg: "请填写材料编码"});
                                return
                            } else {
                                if (code.length !== 2) {
                                    tips('添加材料', {msg: "请填写材料编码"});
                                    return;
                                }
                            }
                        }
                        $.ajax({
                            url: url + '/setting/material/addMaterial',
                            type: "post",
                            data: {
                                name: name,
                                order: Number(order),
                                categoryId: categoryId,
                                code: code,
                                token: getToken()
                            },
                            dataType: "json",
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('添加材料', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('添加材料', r);
                                }
                            }
                        })
                    }
                })
            } else if (data.event == 'excel') {
                layer.open({
                    type: 0,
                    title: "材料列表",
                    area: ["40%", '30%'],
                    content: `当前材料列表正在生成中,请稍等!`,
                    btn: ['关闭'],
                    skin: 'my-skin'
                })
                $.ajax({
                    url: url + '/excel/export/materialsLists',
                    type: 'post',
                    data: {
                        token: getParam('token')
                    },
                    success: function (r) {
                        if (r.code == 100000) {
                            layui.use('layer', function () {
                                var layer = layui.layer;
                                layer.closeAll();
                                layer.open({
                                    type: 0,
                                    title: "导出",
                                    area: ["40%", '30%'],
                                    content: `<p class='one_p'>${r.msg}</p>`,
                                    btn: ['关闭'],
                                    skin: 'my-skin'
                                })
                            });
                        } else {
                            layui.use('layer', function () {
                                var layer = layui.layer;
                                layer.closeAll();
                                layer.open({
                                    type: 0,
                                    title: "导出",
                                    area: ["40%", '30%'],
                                    content: `<p class='one_p'>${r.msg}</p>`,
                                    btn: ['关闭'],
                                    skin: 'my-skin'
                                })
                            });
                        }
                    }
                })
            } else if (data.event == 'upload') {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        type: 0,
                        title: "材料导入",
                        area: ["40%", '30%'],
                        content: `点击按钮选择上传文件&nbsp;&nbsp;&nbsp;<button type="button" class="layui-btn layui-btn-xs" id="upload"><i class="layui-icon layui-icon-file"></i>上传文件</button>`,
                        btn: ['关闭'],
                        skin: 'my-skin',
                        success: function () {
                            var uploadInst = upload.render({
                                elem: '#upload' //绑定元素
                                , accept: 'file'
                                , exts: 'xls|xlsx'
                                , data: {token: getParam('token')}
                                , url: url + '/excel/import/materialLists' //上传接口
                                , done: function (r) {
                                    if (r.code == 100000) {
                                        tips('材料导入', r);
                                        setTimeout(function () {
                                            layer.closeAll();
                                            table.reload('lists');
                                        }, 2000)
                                    } else {
                                        tips('材料导入', r);
                                    }
                                    //上传完毕回调
                                }
                                , error: function () {
                                    //请求异常回调
                                }
                            });
                        },
                    })
                });
            }
        });

        form.on('select(category)', function (data) {
            if (data.value === "3" || data.value === "4") {
                $('#code').parent().parent().parent().show();
            } else {
                $('#code').parent().parent().parent().hide();
            }
        });

        $('body').on('click', '#search', function () {
            var search = $('#searchInput').val();
            var categoryId = $('#categoryId').val();
            table.reload('lists', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    "categoryId": categoryId,
                    "search": search,
                    "token": getToken()
                }
            })
        })
    });
</script>

</html>